<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery四级联动下拉菜单代码</title>

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- <script type="text/javascript" src="script/jquery.citys.js"></script> -->
<script src="js/jquerycity.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo3" class="citys">
    <p>
        <select name="province" id="province"></select>
        <select name="city"></select>
        <select name="area"></select>
        <select name="town"></select>
    </p>
</div>
<script type="text/javascript">
    var selectedAddress = {'province':'', 'city':'', 'area':'', 'town':''};
    var $town = $('select[name="town"]');
    var clearTown = function(){
        $town.hide().empty();
    }
    var townFormat = function(info){
        clearTown();
        if(info['code']%1e4&&info['code']<7e5){ //是否为“区”且不是港澳台地区
            $.ajax({
                url:'http://passer-by.com/data_location/town/'+info['code']+'.json',
                dataType:'json',
                success:function(town){
                    $town.show();
                    $town.append('<option value=""> - 街道、乡镇 - </option>');
                    for(i in town){
                        $town.append('<option value="'+i+'">'+town[i]+'</option>');
                    }
                }
            });
        }
    };
    $('#demo3').citys({
        onChange: function(info){
            clearTown();
            selectedAddress.province = info.province;
            selectedAddress.city = info.city;
            selectedAddress.area = info.area;
        },
        onAreaChange:function(info){
            townFormat(info);
        }
    },function(api){
        var info = api.getInfo();
        townFormat(info);
    });
    $town.on('change', function(){
        selectedAddress.town = $(this).find("option:selected").text();
    });

        console.log(selectedAddress); //输出最终选择的省、市、区县、街道
</script>
</body>
</html>